<template>
  <div>
    <Form :option="formOptions" @model="modelValue"></Form>
    <ElButton type="primary" @click="insert">添加</ElButton>
  </div>

  <Table :data="data" :options="options" @curronRow="selRow"></Table>
  <bj></bj>
</template>
<script setup lang="jsx">
import Table from "./components/Table/index.vue";
import Form from "./components/Form/index.vue";
import bj from "./bj.vue";
import { ElButton } from "element-plus";
import { ref, reactive } from "vue";
const options = [
  {
    field: "selection",
  },
  {
    label: "序号",
    field: "index",
    width: "100px",
  },
  {
    label: "姓名",
    field: "name",
  },
  {
    label: "年龄",
    field: "age",
  },
  {
    label: "操作",
    field: "action",
    slots: () => {
      return (
        <>
          <ElButton type="text" onClick={test}>
            查看
          </ElButton>
          <ElButton type="text">修改</ElButton>
        </>
      );
    },
  },
];

const data = reactive([
  { name: "李四", age: 2 },
  { name: "王五", age: 3 },
  { name: "田七", age: 4 },
]);

function selRow(row) {
  console.log(row, 42);
}
function test() {
  console.log(123);
}

const formOptions = ref([
  {
    field: "name",
    label: "姓名",
    component: "Input",
    span: 6,
  },
  {
    field: "age",
    label: "年龄",
    component: "Select",
    componentProps: {
      options: [
        { label: "123", value: 1 },
        { label: "456", value: 2 },
      ],
    },
    span: 6,
  },
  {
    field: "sex",
    label: "性别",
    component: "Autocomplete",
    componentProps: {
      searchApi: () => {
        return [
          { label: "男", value: "男" },
          { label: "女", value: "女" },
        ];
      },
    },
    span: 6,
  },
  {
    field: "city",
    label: "居住地",
    component: "cascader",
    componentProps: {
      options: [
        {
          value: "北京",
          label: "北京",
          children: [
            {
              value: "朝阳",
              label: "朝阳",
            },
            {
              value: "海淀",
              label: "海淀",
            },
          ],
        },
        {
          value: "天津",
          label: "天津",
          children: [
            {
              value: "南开",
              label: "南开",
            },
            {
              value: "河西",
              label: "河西",
            },
          ],
        },
      ],
    },
    span: 6,
  },
]);
const formParams = ref({});
function modelValue(val) {
  // console.log(val,63)
  formParams.value = val;
}

function insert() {
  console.log("添加");
  console.log(formParams.value, 74);
  data.push(formParams.value);
}
</script>
